<template>
  <div class="xtx-pagination">
    <a href="javascript:;" v-if="myCurrentPage > 1" @click="changePage(myCurrentPage - 1)">上一页</a>
    <a v-else href="javascript:;" class="disabled">上一页</a>
    <span v-if="pager.startBtn > 1">...</span>
    <a href="javascript:;" :class="{ active: i === myCurrentPage }" v-for="i in pager.btnArr" :key="i"
      @click="changePage(i)">{{ i }}</a>
    <span v-if="myCurrentPage < pager.endBtn">...</span>
    <a href="javascript:;" v-if="myCurrentPage < pager.endBtn" @click="changePage(myCurrentPage + 1)">下一页</a>
    <a v-else href="javascript:;" class="disabled">下一页</a>
  </div>
</template>
<script lang="ts">
import { ref, computed, watch } from 'vue'
export default {
  name: 'XtxPagination',
  props: {
    // 总条数
    total: {
      type: Number,
      default: 100
    },
    // 当前页
    currentPage: {
      type: Number,
      default: 1
    },
    // 每页显示条数
    pageSize: {
      type: Number,
      default: 10
    }
  },
  setup(props, { emit }) {
    // 每页显示几条数据
    const myPageSize = ref(10)
    // 总的数据条数
    const myTotal = ref(100)
    // 要显示几个按钮
    const countBnt = 5
    // 当前显示的页码
    const myCurrentPage = ref(5)
    const pager: any = computed(() => {
      //  要计算得得数据（总页数，起始按钮，结束按钮，按钮数组）
      // 总页数
      const pageCount = Math.ceil(myTotal.value / myPageSize.value)
      // 起始按钮，结束按钮，按钮数组
      // 理想情况下
      const offset = Math.floor(countBnt / 2)
      let startBtn = myCurrentPage.value - offset
      let endBtn = startBtn + countBnt - 1
      // 不是理想情况下
      if (startBtn < 1) {
        startBtn = 1
        // 如果结束页大于总的页数，就只显示到总页数的最后一页，否则正常显示
        endBtn = (startBtn + countBnt - 1) > pageCount ? pageCount : (startBtn + countBnt - 1)
      }
      if (endBtn > pageCount) {
        endBtn = pageCount
        // 如果开始页小于1，就只显示到1，否则正常显示
        startBtn = (endBtn - countBnt + 1) < 1 ? 1 : (endBtn - countBnt + 1)
      }
      // 显示的按钮数组
      const btnArr: Array<Number> = []
      for (let i = startBtn; i <= endBtn; i++) {
        btnArr.push(i)
      }
      return {
        pageCount, btnArr, startBtn, endBtn
      }
    })
    // 监听使用者传入的值改变
    watch(props, () => {
      myTotal.value = props.total
      myPageSize.value = props.pageSize
      myCurrentPage.value = props.currentPage
    }, { immediate: true })
    // 改变页码
    const changePage = (newPage) => {
      if (myCurrentPage.value !== newPage) {
        myCurrentPage.value = newPage
        // 通知父组件最新页码
        emit('current-change', newPage)
      }
    }
    return { myCurrentPage, pager, changePage }
  }
}
</script>
<style  lang="less" scoped>
@import '../../assets/styles/common.less';
@import '../../assets/styles/variables.less';

.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;

  >a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;

    &:hover {
      color: @xtxColor;
    }

    &.active {
      background: @xtxColor;
      color: #fff;
      border-color: @xtxColor;
    }

    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;

      &:hover {
        color: #333
      }
    }
  }

  >span {
    margin-right: 10px;
  }
}
</style>